<template>
  <div style="margin: 10px 0;">
    <div class="article-list-show" v-loading.fullscreen.lock="loading"></div>
    <div style="margin: 10px 0;" v-for="item in ArticContent" :key="item.id" >
      <el-card class="box-card" >
        <!-- 发表者信息 -->
        <div slot="header" class="clearfix">
          <div style="width: 70%;">
            <router-link :to="'/user/article/'+item.id">
              <el-tag type="danger" size="mini" effect="dark">{{item.catalog}}</el-tag>
              <span>{{item.title}}</span>
            </router-link>
          </div>
          <div class="link-desrp" @click="toMain(item.user.id)">
            <el-avatar :src="item.user.avatar"></el-avatar>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">收藏</el-button> -->
            <el-link type="success" :underline="false">{{item.user.username}}</el-link>
          </div>
        </div>

        <!-- 文章内容 -->
        <div class="article-content">
          <img :src="item.coverImg" style="width: 30%;height: 150px;margin: 0 20px;"/>
          <div class="content-right">
            <div style="text-align: start;" v-html="item.context">
              <!-- {{item.context}} -->
            </div>
            <div>
              <el-link type="danger"  :underline="false" @click="testclick"><i class="iconfont">&#xe664;</i> 点赞: {{item.likeNum}}</el-link>
              <el-link type="success" :underline="false"><i class="iconfont">&#xe613;</i> 收藏: {{item.collectNum}}</el-link>
              <el-link type="warning" :underline="false"><i class="iconfont">&#xe912;</i> 游览: {{item.viewsCount}}</el-link>
              <el-link type="primary" :underline="false"><i class="iconfont">&#xe611;</i> 评论: {{item.commentNum}}</el-link>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-pagination
      background
      @current-change="nowPage"
      layout="prev, pager, next"
      :total="this.pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  import ArticleApi from '@/api/Article.js'
  export default{
    name:'ArticContent',
    data(){
      return{
        loading:true,
        page:1,
        pageSize:3,
        pageTotal:10,
        ArticContent:[]
      }
    },
    created() {
      //发送请求
      ArticleApi.getpagesInfo(this.page,this.pageSize).then(res => {
        this.loading = false
        this.ArticContent = res.data.list
        this.pageTotal = res.data.pages*10
      })
    },
    methods:{
      testclick(){
        alert(11111)
      },
      nowPage(index){
        //发送请求
        ArticleApi.getpagesInfo(index,this.pageSize).then(res => {
          this.ArticContent = res.data.list
          this.pageTotal = res.data.pages*10
        })
      },
      toMain(uid){
        this.$router.push({
          path:'/user/main/'+uid
        })
      }
    },
  }
</script>

<style scoped="scoped">
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .clearfix div:nth-child(2){
    display: flex;
    justify-content: flex-end;
  }
  .box-card {
    /* width: 480px; */
    width: 100%;
    margin: 0 auto;
    text-align: start;
  }
  .link-desrp a{
    margin: 0 0 0 10px;
  }
  .link-desrp img:nth-child(1){
    margin: 0 20px;
  }
  .article-content{
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .content-right{
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .content-right div:nth-child(1){
    text-overflow: ellipsis;
    width: 100%;
    max-height:100px ;
    color: #777777;
    overflow: hidden;
    display: -webkit-box;
    /* margin: 5px 20px; */
    text-indent: 2rem;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 5;
  }

  .content-right div:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
  }

  .content-right div a{
    margin: 0px 8px;
    color: #909399;
  }
</style>
